<template>
    <div class="home-container">
        <div class="home-content">
            <transition name="slide-left">
                <div :class="{ tran2: !value1 }" class="transition-box">
                    <Tree :data="data" :expand-node="true" :select-node="false" :render="renderContent"
                    :auto-close-contextmenu="false" >
                </Tree>
                </div>
            </transition>
            <div class="arrow" :class="{ tran: !value1 }" @click="value1 = !value1">
                <Icon type="ios-arrow-back" v-if="value1" />
                <Icon type="ios-arrow-forward" v-if="!value1" />
            </div>
        </div>
        <!-- 创建目录 -->
        <Modal
            v-model="modal1"
            title="新建目录"
            @on-ok="addDirectory"
            @on-cancel="cancel">
            <Input v-model="title" autofocus placeholder="请输入目录名字" />
        </Modal>
    </div>
</template>

<script>
export default {
    name: 'home',
    data() {
        return {
            userInfo: '',
            value1: true,
            updataId: '',//需要操作那个目录
            title: '',//目录名字
            modal1: false,//控制添加菜单的显示隐藏
            data: [
                {
                    title: '数据集',
                    id: 1,
                    expand: true,
                    contextmenu: true,
                    children: [
                        {
                            title: '矢量数据',
                            id: 2,
                            expand: true,
                            contextmenu: true,
                            children: [
                                {
                                    title: 'leaf 1-1-1',
                                    contextmenu: true,
                                },
                                {
                                    title: 'leaf 1-1-2',
                                    contextmenu: true,
                                },
                            ],
                        },
                        {
                            title: '栅格数',
                            id: 3,
                            expand: true,
                            contextmenu: true,
                            children: [
                                {
                                    title: 'leaf 1-2-1',
                                    contextmenu: true,
                                },
                                {
                                    title: 'leaf 1-2-1',
                                    contextmenu: true,
                                },
                            ],
                        },
                    ],
                },
            ],
        }
    },
    methods: {
        renderContent(h, { data }) {
            return h('span', {
                style: {
                    display: 'inline-block',
                    width: '100%',
                    cursor: 'pointer',
                },
            }, [
                h('i', {
                    class: 'ivu-icon ivu-icon-ios-folder-open',
                    // type: 'ios-home',
                    style: {
                        marginRight: '8px',
                        color: 'rgb(255,217,102)',
                    },
                }),
                h('Dropdown', {
                    props: {
                        trigger: 'contextMenu',
                        style: {
                            marginLeft: '20px',
                        },
                    },
                    on: {
                        'on-click': (name) => {
                            switch (name) {
                                case '1':
                                    this.updataId = data.id
                                    this.modal1 = true
                                    break
                                case '2':
                                    this.updataId = data.id
                                    break
                                case '3':
                                    this.updataId = data.id
                                    break
                                case '4':
                                    this.updataId = data.id
                                    break
                                default:
                                    this.updataId = data.id
                                    break
                            }
                            // this.handleRender()
                        },
                    },
                }, [
                    h('a', {
                        attrs: {
                            href: ' javascript:void(0)',
                        },
                        style: {
                            color: '#fff',
                        },
                    }, [
                        data.title,
                    ]),
                    h('DropdownMenu', {
                        slot: 'list',
                    }, [
                        h('DropdownItem', {
                            props: { name: '1' },
                        }, '新建目录'),
                        h('DropdownItem', {
                            props: { name: '2' },
                        }, '编辑目录'),
                        h('DropdownItem', {
                            props: { name: '3' },
                        }, '删除目录'),
                        h('Dropdown', {
                            props: {
                                placement: 'right-start',
                            },
                        }, [
                            h('DropdownItem', [
                                '导入',
                                h('Icon', {
                                    props: {
                                        type: 'ios-arrow-forward',
                                    },
                                }),
                            ]),
                            h('DropdownMenu', {
                                slot: 'list',
                            }, [
                                h('DropdownItem', '矢量数据'),
                                h('DropdownItem', '栅格数据'),
                            ]),
                        ]),
                    ]),
                ]),
            ])
        },
        // 确认添加目录
        addDirectory() {
            
        },
    },
}
</script>

<style scoped>
.home-container {
    padding: 10px;
    padding-top: 5px;
    height: 100%;
}
.home-content {
    /* padding: 10px; */
    border-radius: 5px;
    background: #fff;
    height: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
}
.transition-box {
    background-color: rgb(49, 63, 89);
    color: #fff;
    width: 252px;
    height: 100%;
    transform: translateX(0);
    transition: all 0.3s;
}
 ::v-deep .ivu-tree-title {
    color: #fff;
}
.arrow {
    position: absolute;
    top: 50%;
    padding: 15px 10px;
    color: #fff;
    background-color: rgb(63, 80, 110);
    border-radius:0 5px 5px 0;
    cursor: pointer;
    transform: translateX(252px);
    transition: all 0.3s;
}
.tran {
    transform: translateX(0px);
}
.tran2 {
    transform: translateX(-252px);
}
</style>
